<template>
    <view class="ctn">
        <view class="head">
            <view class="head-img">
                <image :src="bangSrc" mode="widthFix"></image>
            </view>
            <text class="head-title">{{ bangName }}</text>
        </view>
        <view class="ul">
            <view class="li">
                <view
                    >已向以下
                    <text class="li-text">银行预留手机号</text> 发送验证码
                </view>
            </view>
            <view class="li">
                <view class="li-left">
                    <text>手机号</text>
                    <input
                        type="text"
                        placeholder="请输入手机号"
                        class="li-main"
                        v-model="phoneNum"
                    />
                </view>
                <text class="li-right" @tap="changeNum()">更换</text>
            </view>
            <view class="li">
                <view class="li-left">
                    <text>验证码</text>
                    <input
                        type="text"
                        placeholder="请输入验证码"
                        class="li-main"
                        v-model="userVerify"
                    />
                </view>

                <text class="li-right" @tap="getVerify()" v-if="show"
                    >获取</text
                >
                <text class="li-right" v-else>{{ number }}秒</text>
            </view>
            <view class="btn" @tap="runPath()"> 下一步 </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phoneNum: `184****4526`,
            countNum: `获取`,
            show: true,
            number: 60,
            clearTimeSet: 0,
            verify: 1,
            userVerify: ``,
            bangName: ``,
            bangSrc: ``,
        };
    },
    onLoad(options) {
        // this.bankBg.name=
        // console.log(111, JSON.parse(options.msg));
        this.bangName = JSON.parse(options.msg).name;
        this.bangSrc = JSON.parse(options.msg).logo;
		uni.setNavigationBarTitle({
			title: '绑定银行卡',
		});
        // console.log(this.bangSrc);
    },
    watch: {
        number(val) {
            // console.log(val);
            if (val == 0) {
                this.clearTime();
                this.number = 60;
            }
        },
    },
    methods: {
        changeNum() {
            this.phoneNum = ``;
        },
        async getVerify() {
            this.show = false;
            this.setTime();
            const res = await this.$api.msg.getData(this.phoneNum);
            if (res.code == 200) {
                this.verify = res.data;
            }
            console.log(res);
        },
        setTime() {
            //设置定时器
            this.clearTimeSet = setInterval(() => {
                this.number--;
                if (this.number == 0) {
                    this.show = true;
                }
            }, 1000);
        },
        clearTime() {
            //清除定时器
            clearInterval(this.clearTimeSet);
        },
        runPath() {
            //跳转到下一步
            console.log(this.userVerify, this.verify);
            if (this.userVerify == this.verify) {
				this.$store.commit('CHANGE_BANK',this.bangName)
				
                uni.showToast({
                    title: "稍等",
                    duration: 2000,
                    icon: "loading",
                });
				uni.navigateTo({
					url:"./bindSucces/bindSucces"
				})
            } else {
                uni.showToast({
                    title: "验证码不正确",
                    duration: 2000,
                    icon: "error",
                });
            }
        },
    },
};
</script>

<style scoped lang="scss">
@mixin flexCol {
    display: flex;
    flex-direction: column;
}

.head {
    @include flexCol();
    justify-content: center;
    align-items: center;
    height: 340rpx;
    width: 100vw;
    background-image: url("../../static/financialImg/verifuBank.png");
    background-position: center;
    background-size: cover;

    .head-img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 110rpx;
        height: 110rpx;
        background-color: #fff;
        border-radius: 55rpx;
        image {
            width: 80rpx;
        }
    }

    .head-title {
        font-size: 36rpx;
        color: #fff;
        margin-top: 30rpx;
    }
}

.ul {
    @include flexCol();
    font-size: 32rpx;
    color: #999;
    padding: 0 40rpx;

    .li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 110rpx;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);

        .li-text {
            color: #333;
            font-weight: bold;
        }

        .li-left {
            display: flex;

            .li-main {
                margin-left: 40rpx;
            }
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 90rpx;
        background-color: #3476f1;
        color: #ffffff;
        font-size: 28rpx;
        border-radius: 12rpx;
        margin-top: 40rpx;
    }
}
</style>
